<html>

<head>
    <meta charset='utf-8'>
    <title>学习页面</title>
    <style>
        * {
            margin: 0px;
            padding: 5px;
        }

        p {
            color: red;
            font-size: 20px;
        }

        .cgreen {
            color: green;
        }

        #h2_title {
            color: blue;
            font-size: 40px;
        }
    </style>
</head>

<body>
    <h1 class='cgreen'>hello world</h1>
    <h2 id='h2_title'>hello world</h2>
    <p>段落,<br />
        在html中一般的回车并不起作用，会被解释成为一个空格</p>
    但是br不一样,br标签的作用是换行<br />
    <img src='./背景.jpg' width="300px"><br />
    <a href='http://www.baidu.com'>
        这是一个链接，可以跳转到百度</a><br />
    <form action='http://43.138.136.34:8800/login' method='post'>
        <input type='text' id='username' name='username'>
        <input type='password' id='password' name='password'>
        <input type='submit' name='submit' value="提交">
    </form><br />
    <button onclick="test()"> 普通的button </button>
</body>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
    var ws = new WebSocket("ws://43.138.136.34:8800/ws");
    ws.onopen = function () {
        alert("ws 握手成功");
    }
    ws.onerror = function () {
        alert("ws 通信错误");
    }
    ws.onclose = function () {
        alert("ws 连接断开")
    }
    ws.onmessage = function (evt) {
        //alert(evt.data);
        var h2 = document.getElementById("h2_title");
        h2.innerHTML = evt.data;
    }
    function test() {
        ws.send(document.getElementById("username").value);
        document.getElementById("username").value = "";
        // var login_info = {
        //     username: document.getElementById("username").value,
        //     password: document.getElementById("password").value
        // }
        // $.ajax({
        //     type: "post",
        //     url: "http//43.138.136.34:8800/login",
        //     data: JSON.stringify(login_info),
        //     success: function (res, statu, xhr) {
        //         alert(res);
        //     },
        //     error: function (xhr) {
        //         alert(JSON.stringify(xhr));
        //     }
        // });
        //alert("你好！！");
        // var h2 = document.getElementById("h2_title");
        // alert(h2.innerHTML);
        // h2.innerHTML = "Hello Bite";
        // var input = document.getElementById("username");
        // alert(input.value);
        // input.value = "";
    }
</script>

</html>